<!--
 * @Author: dfh
 * @Date: 2024-03-02 02:12:57
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="content">
        <image :src="$filters.formatImage('welcome_image_1.png')" mode="widthFix" />
        <!-- 姓名、手机号、城市 -->
        <input v-model="formData.username" placeholder="请输入您的姓名" class="input" placeholder-class='p-c' />
        <input v-model="formData.mobile" placeholder="请输入您的手机号" class="input" placeholder-class='p-c' inputmode="numeric" type="number"/>
        <text class="input" :style="{ color: formData.address ? 'white' : 'rgba(255,255,255,.6)' }" @click="onShowProvince" >{{ formData.address ?
            formData.address : '请选择您的城市' }}</text>

        <PickerSelect ref="pickeEle" @confirm="provinceBC" />
        <button class="btn" @click="registerHandle">立即预约</button>
        <PrivacyDialog></PrivacyDialog>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import PickerSelect from '@/components/picker-select/index.vue'
import { onLoad } from '@dcloudio/uni-app';
import PrivacyDialog from '@/components/privacy-dialog.vue'

const formData = ref({
    username: '',
    mobile: '',
    address: ''
})
const pickeEle = ref(null);
const p_c_a = ref({
    p_name: '',
    c_name: '',
    a_name: ''
});

onLoad(()=>{

})

const onShowProvince = () => {
    pickeEle.value.onShowProvince();
}

const provinceBC = ({ provinces = {}, city = {}, area = {} }) => {
    if (provinces.id || city.id || area.id) {
        formData.value.address = `${provinces.fullname}、${city.fullname}、${area.fullname}`
        p_c_a.value = { p_name: provinces.fullname, c_name: city.fullname, a_name: area.fullname }
    }
}
const registerHandle = () => {
    const { username, mobile, address } = formData.value;
    let title = ''
    if (address == '') {
        title = '请输入正确的地址'
    }
    if (!validatePhoneNumber(mobile)) {
        title = '请输入正确的手机号'
    }
    if (username == '') {
        title = '请输入正确的用户名'
    }
    if (title != '') {
        uni.showToast({ title, icon: 'none' })
        return;
    }
    uni.showLoading({ title: '提交中...' })
    uni.request({
        url: "https://sc.itianxia.cn/bank/userinfo/saveBank",
        method: 'POST',
        data: {
            name: username,
            mobile,
            address
        },
        responseType: 'application/json',
        success: (res) => {
            const { statusCode, data } = res;
            if (statusCode == 200) {
                const { status, msg } = data;
                if (status == 1) {
                    uni.redirectTo({ url: '/pages/success/index' })
                } else {
                    uni.showToast({ title: msg || '请重试', icon: 'none' });
                }
            } else {
                uni.showToast({ title: '请重试', icon: 'none' });
            }
        },
        fail: (err) => {
            uni.showToast({ title: '请重试', icon: 'none' });
        },
        complete: () => {
            uni.hideLoading();
        }
    })
}

const validatePhoneNumber = (phoneNumber) => {
    if (!phoneNumber) return false;
    var regex = /^(\+?86|0)?1\d{10}$/;
    return regex.test(phoneNumber);
}
</script>
<style> .p-c {
     color: rgba(255, 255, 255, .6)
 }
</style>
<style lang="scss" scoped>
.content {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    background: linear-gradient(to right bottom, #2d3a89, #085bbb);

    /* .row-item {
        display: flex;
        flex-direction: row;
        width: 90%;
        border-bottom: 2rpx solid white;
        align-items: center;

        .icon {
            width: 50rpx;
            height: 50rpx;
            margin: 0 20rpx 0 10rpx;
            opacity: 0.6;
        }
    } */

    .input {
        width: 86%;
        border-bottom: 2rpx solid white;
        height: 100rpx;
        color: white;
        line-height: 100rpx;
        font-size: 36rpx;

    }



    .btn {
        width: 86%;
        height: 100rpx;
        border-radius: 50rpx;
        margin-top: 60rpx;
        background: #0572e7;
        color: white;
        line-height: 100rpx;
        margin-bottom: 40rpx;
    }
}
</style>